<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创意模块</title>
    <script src="util.js"></script>
    <script src="req.js"></script>
    <script src="flexible.min.js"></script>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        #main {
            display: flex;
            width: 70vw;
            height:50vh;
        }
    </style>
</head>

<body>
    <div id="main"></div>
    <script>
        JQ("http://192.168.1.101:8085/dataInterface/UserPeople/getAll")
            .then(e => {
                var index = {
                    nullData: 0
                }
                var obj = new Map()
                var len = 0;
                e.data.forEach(item => {
                    len++;
                    if (item.workPostId == "") {
                        index.nullData = index.nullData + 1
                    } else {
                        var data = obj.get(item.workPostId)
                        if (data == undefined) {
                            obj.set(item.workPostId, 1)
                        } else {
                            obj.set(item.workPostId, data + 1)
                        }

                    }
                    if (len == e.data.length) {
                        setOption(obj, index.nullData)
                    }
                })
            })

        function setOption(obj, nullData) {
            var xAxis = []
            var yAxis = []
            var len = 0;
            obj.forEach((value, key) => {
                console.log(value, key);
                getPost(key).then(item => {
                    xAxis.push(item)
                    yAxis.push(value)
                    len++;
                    if (len == obj.size) {
                        xAxis.push("未上岗员工数量")
                        yAxis.push(nullData)
                        console.log(xAxis, yAxis);
                        var myEchart = echarts.init(document.getElementById("main"));
                        var option = {
                            tooltip: {
                                trigger: 'axis'
                            },
                            title:{
                                text:"员工岗位数量"
                            },
                            legend: {
                                data: xAxis
                            },
                            xAxis: {
                                data: xAxis
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                data: yAxis,
                                type: 'line',
                                smooth: true
                            }]
                        }
                        myEchart.setOption(option);
                    }
                })

            })




        }

        function getPost(postId) {
            return new Promise((res, rej) => {
                JQ("http://192.168.1.101:8085/dataInterface/WorkPost/getAll")
                    .then(e => {
                        e.data.forEach(item => {
                            if (postId == item.id) {
                                res(item.workPostName)
                            }
                        })
                    })
            })
        }
    </script>
</body>

</html>